<template>
  <div class="bigBox">
    <img src="../assets/imgs/lgbj2.png" class="bjImgmin">
   <div class="c-loginBox">
    <div class="c-fromBox">
      <h3>高考填志愿管理后台</h3>
    <el-form label-width="auto" class="add" :model="formList" :rules="rules" @keyup.enter="logins">
      <el-form-item  >
    </el-form-item>
    <el-form-item  prop="name">
      <el-input v-model="formList.name"  type="text" :prefix-icon="User" placeholder="请输入账号" />
    </el-form-item>
    <el-form-item  prop="pas">
      <el-input v-model="formList.pas"  show-password  :prefix-icon="Lock" placeholder="请输入密码" />
    </el-form-item>
     <el-form-item  >
       <el-button type="success" class="c-loginBtn" @click="logins" >登录</el-button>
    </el-form-item>
     <el-form-item  class="c-chrckBox">
       <el-checkbox v-model="formList.checked1" label="记住密码" size="large" />
       <el-button text @click="isOk=true">忘记密码</el-button>
    </el-form-item>
  </el-form>
    </div>
   </div>
    <div class="c-pasBigbox" v-show="isOk">
       <div class="c-pasBox">
      <!-- 忘记密码 -->
      <h1>找回密码</h1>
 <el-form label-width="auto"  :model="retrievePasList" ref="pasFromlist" :rules="rules">
      <el-form-item  >
    </el-form-item>
    <el-form-item prop="phone" >
      <text>手机号:</text>
      <el-input v-model="retrievePasList.phone"  type="text"  placeholder="请输入账号" class="phoneInput" />
      <text class="forVcode" @click="pasVcode">发送验证码</text>
    </el-form-item>
     <el-form-item  prop="Vcode">
      <text>验证码:</text>
      <el-input v-model="retrievePasList.Vcode"  type="text"  placeholder="请输入验证码" />
    </el-form-item>
    <el-form-item  prop="pas">
      <text>新密码:</text>
      <el-input v-model="retrievePasList.pas" show-password  placeholder="请输入新密码" />
    </el-form-item>
    <el-form-item  prop="pas">
      <text>确认密码:</text>
      <el-input v-model="retrievePasList.pas" show-password  placeholder="请输入新密码" />
    </el-form-item>
     <el-form-item  class="qxBox">
      <el-button class="c-qxBtn" @click="qxisOk">取消</el-button>
       <el-button type="success" class="c-xgBtn" color="#6353A2" @click="updetePas">确认修改</el-button>
    </el-form-item>
  </el-form>
    </div>
    </div>
  </div>
</template>

<script >
import {toRefs } from 'vue'
import { ElButton ,ElForm ,ElFormItem} from 'element-plus'
import { User,Lock } from '@element-plus/icons-vue'
import { useCounterStore } from "../store";

// import { getList } from '@/api/axiosPlus.js'

export default ({
  components: {
     ElButton ,ElForm ,ElFormItem
  },
  setup(){
  const store = useCounterStore();
  //修改密码界面取消按钮
  const qxisOk = () =>{
   store.qxisOks()
  }
  //修改密码验证码
  const pasVcode =  ()=>{
    store.pasVcodes()
  }
  //修改密码
  const updetePas = async () =>{
   store.updatePasd()
  }
  //记住账号
  const userName = ()=>{
    store.getUserName()
  }
  //登录按钮
  const logins = async()=>{
    store.loginBtn()
  }
    return{
    ...toRefs(store),
     User,
     Lock,
     logins,
     userName,
     pasVcode,
     updetePas,
     qxisOk
    }
  },
  created(){
    this.userName()
    // this.req()
  }
})
</script>
<style lang="less" scoped>
.bigBox{
  height: 100%;
  width: 100%;
  background: url(../assets/imgs/lbj1.jpg);
  background-size: 100% 100%;
       .bjImgmin{
        position: absolute;
       top: 20%;
       left: 10%;
       }
       .c-loginBox{
       width: 587px;
       height: 442px;
       border-radius: 50px;
       background: #FFFFFF;
       position: absolute;
       top: 50%;
       left: 65%;
       transform: translate(-50%,-50%);
      .c-fromBox{
        width: 60%;
       position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
           text-align: center;
           h3{
            margin-bottom: 20px;
           }
           
           /deep/.c-chrckBox{
            display: flex;
            justify-content: space-between;
            position: relative;
            .el-button{
              position: absolute;
              right: 5px;
              color: #959595;
            }
            .el-checkbox{
              color: #101010;
            }
           }
           .el-form-item{
            position: relative;
            margin-bottom: 20px;
             .c-loginBtn{
            position: absolute;
            right: 0;
            width: 100px;
           }
           /deep/.el-checkbox__inner{
            border: 1px solid #666;
           }
         /deep/.el-input__wrapper{
          border: 1px solid transparent;
          box-shadow: 0 0 0 0 ;
         }
         /deep/.el-input{
          border-bottom: 2px solid #BBBBBB;
         }
           }
          
      }
                 }
}
.c-pasBigbox{
          border: 0px solid red;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          position: absolute;
          z-index: 555;
        .c-pasBox{
        width: 400px;
        height: 400px;
        border: 0px solid red;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border: 1px solid #EEE;
        h1{
          width: 400px;
         line-height: 50px;
          border-bottom: 2px solid #4A1DF7;
          text-align: center;
          font-size: 1.5rem;
        }
        .el-form{
          width: 360px;
          border: 0px solid red;
          margin: 0 auto;
          .el-form-item{
            width: 360px;
            margin-top: 20px;
            border: 0px solid red;
            text{
              width: 60px;
            }
            .forVcode{
              cursor: pointer;
            }
            .el-button{
              /deep/span{
               font-size: 0.6rem;
              }
            }
            .c-xgBtn,.c-qxBtn{
              margin: 0 30px;
              border: 1px solid #666;
              
            }
            .el-input{
              width: 220px;
              height: 40px;
              margin-left: 5px;
            }
            .phoneInput{
              width: 160px;
            }
            .forVcode{
              color: #896CFA;
              margin-left: 10px;
              width: 100px;
            }
          }
        }
      }
                 }

</style>

